<template>
	<view class="contnt">
		<view class="head-box flex-center-c">
			<button class="imgB" open-type='chooseAvatar' @chooseavatar="onChooseAvatsar">
				<img v-if="data.form.avatar" class="head-img" :src="data.form.avatar" alt="">
				<img v-else class="head-img" src="../../../static/img/img/head-ing.png" alt="">
			</button>
			<text>点击更换头像</text>
		</view>
		<view class="form-box">
			<uv-form labelPosition="top" :model="data.form" ref="form" labelWidth="80">
				<uv-form-item label="昵称" prop="name">
					<uv-input @blur="changeInput" v-model="data.form.name" type='nickname'  placeholder="请输入您的昵称">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="性别" prop="sex" class="sex-b" @click="selectSex">
					<uv-input v-model="data.sex" disabled disabledColor="#ffffff" placeholder="请选择性别">
					</uv-input>
					<template v-slot:right>
						<uv-icon class="arrow" name="arrow-down"></uv-icon>
					</template>
				</uv-form-item>
				<uv-form-item label="生日" prop="birthday" @click="selectBirthday">
					<uv-input v-model="data.form.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日">
					</uv-input>
				</uv-form-item>

				<uv-form-item label="所在城市" prop="location">
					<uv-input v-model="data.form.location" disabled disabledColor="#ffffff">
					</uv-input>
				</uv-form-item>
				<uv-form-item label="个性签名" prop="signature">
					<uv-input v-model="data.form.signature" placeholder="请输入您的个性签名">
					</uv-input>
				</uv-form-item>
				<view class="btn-b">
					<view class="blue-btn" @click="save">保存</view>
				</view>
			</uv-form>
			<uv-picker ref="sexPicker" :columns="data.sexDic" keyName="value" @confirm="sexConfirm"></uv-picker>
			<uv-datetime-picker ref="birthdayPicker" v-model="data.currrentDate" mode="date" @confirm="dateConfirm"
				:minDate='data.minDate'>
			</uv-datetime-picker>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getMnumByName,
		updateInformation
	} from '../../requestApi/api.js';

	const data = ref({
		form: {
			"avatar": "",
			"birthday": "",
			"id": '',
			"location": uni.getStorageSync('city'),
			"sex": '',
			"signature": "",
			name: '',
		},
		sexDic: [],
		sex: '',
		currrentDate: new Date(),
		minDate: new Date("1970-01-01 00:00:00").getTime(),
	})
	const sexPicker = ref(null);
	const birthdayPicker = ref(null);
	onLoad(() => {
		getSexDic();
		let userInfo = uni.getStorageSync('userInfo');
		data.value.form = {
			"avatar": userInfo.avatar,
			name: userInfo.name,
			"birthday": userInfo.birthday,
			"id": userInfo.id,
			"location": userInfo.location || uni.getStorageSync('city'),
			"sex": userInfo.sex,
			"signature": userInfo.signature
		}
		data.value.sex = userInfo.sex ? userInfo.sex == '13' ? '男' : '女' : '';
	});
	//获取 昵称
	const changeInput=(e)=>{
		data.value.form.name=e;
	};
	//保存
	const save = () => {
		// console.log('54444', data.value.form.name)
		var values = Object.values(data.value.form);
		let verify = values.every(value => value != '')
		if (verify) {
			updateInformation(data.value.form).then(res => {
				let userInfo = uni.getStorageSync('userInfo');
				userInfo.avatar = data.value.form.avatar;
				userInfo.name = data.value.form.name;
				userInfo.signature = data.value.form.signature;
				userInfo.sex = data.value.form.sex;
				userInfo.birthday = data.value.form.birthday;
				uni.setStorageSync('userInfo', userInfo)
				uni.switchTab({
					url: '/pages/tabbar/my/my'
				})
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: '请填写完整信息'
			})
		}

	};
	//补0
	const formatNumber = (n) => {
		n = n.toString()
		return n.padStart(2, 0);
	}
	//打开生日选择picker
	const selectBirthday = () => {
		birthdayPicker.value.open();
	};
	//选择时间
	const dateConfirm = (e) => {
		console.log(e)
		let date = new Date(e.value);
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
		data.value.form.birthday = [year, month, day].map(formatNumber).join('-');
	};
	//选择性别
	const sexConfirm = (e) => {
		data.value.sex = e.value[0].value;
		data.value.form.sex = e.value[0].code;
	};
	//获取性别字典
	const getSexDic = () => {
		getMnumByName({
			enumName: 'sexEnum'
		}).then(res => {
			data.value.sexDic = [res.data];
		})
	};
	//打开选择性别picker
	const selectSex = () => {
		sexPicker.value.open();
	};
	//选择图片
	const onChooseAvatsar = (e) => {
		// console.log(e)
		let type = e.detail.avatarUrl.split('.')[1];
		base64(e.detail.avatarUrl, type).then(res => {
			data.value.form.avatar = res;
			// console.log(res)
		});

	};
	// 图片转64代码
	const base64 = (url, type) => {
		return new Promise((resolve, reject) => {
			uni.getFileSystemManager().readFile({
				filePath: url, //选择图片返回的相对路径
				encoding: 'base64', //编码格式
				success: res => {
					// console.log(res)
					resolve('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
					// console.log('data:image/' + type.toLocaleLowerCase() + ';base64,' + res.data)
					// resolve(res.data)
				},
				fail: res => reject(res.errMsg)
			})
		})
	};
</script>

<style lang="scss">
	.contnt {
		padding-top: 16rpx;

		.head-box {
			font-size: 36rpx;
			font-weight: bold;
			color: #2C2C2C;
			margin-bottom: 52rpx;

			.imgB {
				background: none;
				width: 144rpx;
				height: 144rpx;

				padding: 0;
			}

			.imgB::after {
				border: none;
			}

			.head-img {

				width: 144rpx;
				height: 144rpx;

				margin-bottom: 32rpx;
				border-radius: 50%;
			}

		}

		.form-box {
			padding: 0 36rpx;

			.sex-b {
				position: relative;

				.arrow {
					position: absolute;
					right: 0;
				}
			}
		}
	}

	::v-deep .uv-form-item__body {
		padding: 0 0 10px !important;
	}

	::v-deep .uv-form-item__body__left__content {
		margin-bottom: 10rpx;
	}

	::v-deep .uv-form-item__body__left__content__label {
		color: #585858 !important;
		font-size: 24rpx !important;
	}

	::v-deep .item__body__right__content__icon {
		position: relative;
	}

	::v-deep .uv-icon--right {
		position: absolute;
		right: 24rpx;
		top: -12rpx;
	}
</style>